<template>
  <div class="events">
    <section class="hero-banner">
      <div class="banner-content">
        <h1 class="banner-title">端午节特色活动</h1>
        <p class="banner-subtitle">体验传统文化，感受节日氛围</p>
      </div>
    </section>

    <section class="events-container">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">精彩活动</h2>
          <p class="section-description">参与我们的端午节特色活动，感受传统文化的魅力</p>
        </div>

        <div class="events-grid">
          <div v-for="(event, index) in events" :key="index" class="event-card">
            <div class="event-image-container">
              <img :src="event.image" :alt="event.title" class="event-image">
              <div class="event-date">{{ event.date }}</div>
            </div>
            <div class="event-content">
              <h3 class="event-title">{{ event.title }}</h3>
              <p class="event-description">{{ event.description }}</p>
              <div class="event-details">
                <div class="event-location">
                  <i class="icon">📍</i> {{ event.location }}
                </div>
                <div class="event-price">
                  <i class="icon">💰</i> {{ event.price }}
                </div>
              </div>
              <button class="btn register-btn" @click="openModal(event)">立即报名</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <transition name="fade">
      <div v-if="showModal" class="modal-overlay">
        <div class="modal-container">
          <div class="modal-header">
            <h3>{{ selectedEvent.title }}</h3>
            <button class="close-btn" @click="closeModal">&times;</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="submitForm" class="registration-form">
              <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="formData.name" required>
              </div>
              <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" v-model="formData.email" required>
              </div>
              <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" v-model="formData.phone" required>
              </div>
              <div class="form-group">
                <label for="participants">参与人数</label>
                <input type="number" id="participants" v-model="formData.participants" min="1" required>
              </div>
              <div class="form-group">
                <label for="message">备注信息</label>
                <textarea id="message" v-model="formData.message"></textarea>
              </div>
              <div class="form-actions">
                <button type="submit" class="btn submit-btn">提交报名</button>
                <button type="button" class="btn cancel-btn" @click="closeModal">取消</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </transition>

    <div class="notification" v-if="showNotification">
      <div class="notification-content">
        <p>{{ notificationMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Events',
  data() {
    return {
      events: [
        {
          title: '龙舟竞渡大赛',
          date: '6月22日 09:00-12:00',
          location: '城市中央公园湖',
          price: '免费参与',
          description: '体验传统龙舟竞渡的激情与团队合作精神，我们将提供专业的龙舟设备和安全指导。',
          image: 'https://x0.ifengimg.com/ucms/2021_24/2A942EB56E6BB18C5BB46FCC0F9B1484C689A60F_size625_w800_h500.jpg'
        },
        {
          title: '传统粽子制作工坊',
          date: '6月22日 14:00-17:00',
          location: '文化中心厨房',
          price: '材料费 ¥50/人',
          description: '学习制作南北风味粽子，了解不同地区的粽子特色和包制技巧，成品可带回家。',
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.8cf1bc5edb75929855b9db32179dedc3?rik=OQqXRdtSbCiZfw&riu=http%3a%2f%2fzjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn%2fjcms_files%2fjcms1%2fweb2905%2fsite%2fpicture%2f0%2f1906041053488129085.jpg&ehk=%2bs6nebhO9201ahugd8u7TBRU0D4zSeatzuFPzAawgzQ%3d&risl=&pid=ImgRaw&r=0'
        },
        {
          title: '端午香囊DIY体验',
          date: '6月23日 10:00-12:00',
          location: '民俗艺术馆',
          price: '材料费 ¥30/人',
          description: '亲手制作端午节传统香囊，学习中药知识，体验传统文化魅力，适合亲子共同参与。',
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.074acf31e30ad260a524ab1b8d0c8c19?rik=jDLeERxRKbOxtw&riu=http%3a%2f%2fwww.chengxiangtang.com%2fuploads%2fallimg%2f190611%2f1-1Z611111419351.jpg&ehk=KuAmby985UUAKI62N0i%2bxATqaiP10VYx6t5xFd8oWP0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
        },
        {
          title: '端午诗词朗诵会',
          date: '6月23日 15:00-17:00',
          location: '图书馆报告厅',
          price: '免费参与',
          description: '欣赏和朗诵屈原的诗词作品，感受传统文化的深厚底蕴，欢迎诗词爱好者参与。',
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.2103eb381620c61bab664c5a6e814acc?rik=quctxyQMQCBqhw&riu=http%3a%2f%2fn.sinaimg.cn%2ftranslate%2f20170528%2fUCen-fyfquxv3800703.jpg&ehk=DpwEa9kQywUwd0hP2UudBLUWlFZW8CRm6T0ptbXiPFs%3d&risl=&pid=ImgRaw&r=0'
        }
      ],
      showModal: false,
      selectedEvent: {},
      formData: {
        name: '',
        email: '',
        phone: '',
        participants: 1,
        message: ''
      },
      showNotification: false,
      notificationMessage: ''
    }
  },
  methods: {
    openModal(event) {
      this.selectedEvent = event
      this.showModal = true
      document.body.style.overflow = 'hidden'
    },
    closeModal() {
      this.showModal = false
      this.resetForm()
      document.body.style.overflow = 'auto'
    },
    submitForm() {
      // 这里可以添加表单验证逻辑
      this.showNotification = true
      this.notificationMessage = `感谢 ${this.formData.name} 报名参加 ${this.selectedEvent.title} 活动！我们已发送确认邮件至 ${this.formData.email}`
      
      // 模拟API调用
      setTimeout(() => {
        this.closeModal()
        setTimeout(() => {
          this.showNotification = false
        }, 3000)
      }, 1000)
    },
    resetForm() {
      this.formData = {
        name: '',
        email: '',
        phone: '',
        participants: 1,
        message: ''
      }
    }
  }
}
</script>

<style scoped>
.hero-banner {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('https://ts1.tc.mm.bing.net/th/id/R-C.4dcb2c7543f4bec94fca0a12a724c93c?rik=NIgupr%2fYtM%2b3tw&riu=http%3a%2f%2foimg.tianqistatic.com%2fcontent%2f20200402%2fJXLesTqxrAJBi7JGO23ssUBI.jpg&ehk=RhZmB%2bK3sCTVbeK9P4rzwcBuI7mFkAscCsOrJ0Wf%2beU%3d&risl=&pid=ImgRaw&r=0');
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-bottom: 60px;
}

.banner-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.events-container {
  padding: 0 20px 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--primary-color);
}

.section-description {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.event-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.event-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.event-card:hover .event-image {
  transform: scale(1.05);
}

.event-date {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
}

.event-content {
  padding: 20px;
}

.event-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.event-description {
  color: #555;
  margin-bottom: 15px;
  line-height: 1.6;
}

.event-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #666;
}

.register-btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: bold;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: var(--primary-color);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.registration-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.submit-btn {
  flex: 1;
  background-color: var(--primary-color);
}

.cancel-btn {
  flex: 1;
  background-color: #666;
}

.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-color);
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: slideIn 0.5s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .hero-banner {
    height: 300px;
  }
  
  .banner-title {
    font-size: 2.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .events-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>